<template>
  <header class="rating_header" v-if="ScoreData">
    <section class="rating_header_left">
      <!-- toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 -->
      <p>{{ScoreData.overall_score.toFixed(1)}}</p>
      <p>综合评价</p>
      <!-- 小数转换为百分比 先转化为number类型 再乘以100 toFixed() 作用保留几位小数位-->
      <p>高于周边商家{{(ScoreData.compare_rating*100).toFixed(1)}}%</p>
    </section>
    <section class="rating_header_right">
      <p>
        <span>服务态度</span>
      <section class="rating_container">
        <section class="star_container">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
          <!-- <svg class="icon" aria-hidden="true" v-if="item.rating>4.5">
              <use xlink:href="#icon-xingxing2"></use>
            </svg> v-else-->
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
        </section>
      </section>
      <span class="rating_num">{{ScoreData.service_score.toFixed(1)}}</span>
      </p>
      <p>
        <span>菜品评价</span>
      <section class="rating_container">
        <section class="star_container">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
          <!-- <svg class="icon" aria-hidden="true" v-if="item.rating>4.5">
              <use xlink:href="#icon-xingxing2"></use>
            </svg> v-else-->
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingxing2"></use>
          </svg>
        </section>
      </section>
      <span class="rating_num">{{ScoreData.food_score.toFixed(1)}}</span>
      </p>
      <p>
        <span>送达时间</span>
        <span class="delivery_time">{{ScoreData.deliver_time}}分钟</span>
      </p>
    </section>
  </header>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['ScoreData'])
  }
}
</script>

<style lang="less" scoped>
.rating_header {
  margin-top: 0.1rem;
  display: flex;
  background-color: #fff;
  padding: 0.8rem 0.5rem;
  margin-bottom: 0.5rem;
  .rating_header_left {
    flex: 3;
    text-align: center;
    p:nth-of-type(1) {
      font-size: 1rem;
      color: #f60;
    }
    p:nth-of-type(2) {
      font-size: 0.6rem;
      color: #666;
      margin-bottom: 0.1rem;
    }
    p:nth-of-type(3) {
      font-size: 0.4rem;
      color: #999;
    }
  }
  .rating_header_right {
    flex: 4;
    > p {
      font-size: 0.6rem;
      line-height: 1rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      > span {
        color: #666;
        margin-right: 0.3rem;
      }
      .rating_num {
        margin-left: 0.3rem;
        font-size: 0.55rem;
        color: #f60;
      }
    }
  }
}
.delivery_time {
  display: block;
  margin-left: 0.3rem;
  font-size: 0.4rem;
  color: #999;
}
</style>